<script setup>
import { onMounted, ref } from "vue";
import { getAllBlogs, searchBlogs } from "@/api/blogs";
import { ElMessage } from 'element-plus'

// 表单数据
const formInline = ref({
  title: "",
});


//  加载数据
const loading = ref(true);
const lists = ref([]);


//获得轮播图数据
const getblogs = async () => {
  const result = await getAllBlogs();
  if (result.code) {
    lists.value = result.data;
  }
}

onMounted(() => {
  loading.value = false;
  getblogs();
});

// 搜索
const onSubmit = async () =>{
  if(!formInline.value.title){
    ElMessage.error('请输入关键字');
    getblogs();
    return;
  }
  
  const result = await searchBlogs(formInline.value.title);
  if(result.code){
    lists.value = result.data;
  }else{
    ElMessage.error('没有查询到数据');
  }
}
</script>

<template>
  
  <!-- 搜索框 -->
  <div id="search">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="formInline.title"
          placeholder="请输入关键字"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit"
          ><el-icon> <Search /> </el-icon>查询</el-button
        >
      </el-form-item>
    </el-form>
  </div>

  <!-- 列表 -->
  <div class="body">
    <el-skeleton
      style="display: flex; gap: 8px"
      :loading="loading"
      animated
      :count="3"
    >
    <!-- 骨架 -->
      <template #template>
        <div style="flex: 1">
          <el-skeleton-item variant="image" style="height: 240px" />
          <div style="padding: 14px">
            <el-skeleton-item variant="h3" style="width: 50%" />
            <div
              style="
                display: flex;
                align-items: center;
                justify-items: space-between;
                margin-top: 16px;
                height: 16px;
              "
            >
              <el-skeleton-item variant="text" style="margin-right: 16px" />
              <el-skeleton-item variant="text" style="width: 30%" />
            </div>
          </div>
        </div>
      </template>

      <template #default>
        <div
          style="
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            justify-content: center;
            box-sizing: border-box;
            height: auto;
          "
        >
          <el-card
            v-for="item in lists"
            :key="item.name"
            :body-style="{ padding: '15px' }"
            style="width: 24%;
            box-sizing: border-box;
            margin-bottom: 16px"
          >
          <router-link :to="{name: 'readblog',params: {id: item.id}}">
            <img
              :src="item.backgroundImage"
              class="image multi-content"
              style="max-width: 100%;
              display: block;
              height: 240px;
              "
            />
            <div style="padding: 14px" >
              <span class="card_title">{{ item.title }}</span>
              <div class="bottom card-header" style="display: flex;">
                <img class="card_image"
                :src="item.userImage"
                >
                <div class="card_name" >{{ item.userName }}</div>
              </div>
              <div class="card_time">{{ item.createTime.split('T')[0] }}</div>
            </div>
          </router-link>
            
          </el-card>
        </div>
      </template>
    </el-skeleton>
  </div>

  <!-- 分页 -->
   <div style="display: none;">
    <span class="demonstration">跳转</span>
  <div
    class="demo-pagination-block"
    style="display: flex; justify-content: center"
  >
    <el-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
   </div>
  
</template>

<style scoped>
#search {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.demonstration {
  /* margin: 20px; */
  text-align: center;
}

a {
  text-decoration: none; 
  color: inherit; 
}

.card_image {
  width: 40px;
  border: 3px solid #ccc; /* 边框颜色和粗细 */
  border-radius: 50%; /* 可选：圆形边框 */
}

.card_name{
  display: flex;
  align-items: center;
  margin-left: 10px;
  color: hotpink;
}

.card_time {
  color: #ccc;
}

</style>
